<template>
  <div class="page-login">
    <div class="page-logo">
      <img :src="`${$baseUrl}image/theme/logo.jpg`">
      <span>订报统计系统</span>
    </div>
    <div class="page-login--form">
      <div class="page-login--title">欢迎登录</div>
      <el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin" size="default">
        <el-form-item prop="number"> 
          <el-input  class="num-input" v-model="formLogin.number" placeholder="请输入学校名称">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" class="password-input" v-model="formLogin.password" placeholder="请输入密码">
          </el-input>
        </el-form-item>

        <el-button size="default" @click="submit" type="primary" class="button-login">
          立即登录
        </el-button>
      </el-form>

    </div>

  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {

      // 表单
      formLogin: {
        number: '',
        password: '',
      },
      // 表单校验
      rules: {
        number: [
        {
            required: true,
            message: '请输入学校名称',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
      }
    }
  },
  mounted() {

  },
  methods: {
    ...mapActions('d2admin/account', [
      'login'
    ]),

    /**
     * @description 提交表单
     */
    // 提交登录信息
    submit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 登录
          // 注意 这里的演示没有传验证码
          // 具体需要传递的数据请自行修改代码
          this.login({
            number: this.formLogin.number,
            password: this.formLogin.password
          })
            .then(() => {
              // 重定向对象不存在则返回顶层路径
              this.$router.replace(this.$route.query.redirect || '/')
            })
        } else {
          // 登录表单校验失败
          this.$message.error('表单校验失败，请检查')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.page-login {
  height: 100%;
  background-image: url(/img/index_bg.ac1ac0d4.jpg);
  background-size: 1920px 1080px;
  background-position: bottom center;
  position: relative;

  .page-logo {
    padding-top: 21px;
    padding-left: 26px;
    display: flex;
    align-items: center;
    font-weight: bold;
    img {
      margin-right: 8px;
      width: 36px;
      height: 45px;
    }

    span {
      font-size: 20px;
    }
  }

  // 登录表单
  .page-login--form {
    box-sizing: border-box;
    padding: 71px 103px;
    position: absolute;
    top: calc(50% - 206px);
    left: calc(50% - 268px);
    width: 536px;
    height: 412px;
    box-shadow: 0px 0px 20px 0px #D2DAE4;
    border-radius: 20px;
    background: #fff;
    overflow: hidden;

    .page-login--title {
      font-size: 24px;
      line-height: 33px;
      text-align: center;
      margin-bottom: 24px;
    }

    .num-input {
      input {
        height: 50px;
        font-size: 16px;
        background: #F7F7F7;
        border-radius: 6px;
        border: none;
      }
    }

    .password-input {
      input {
        height: 50px;
        font-size: 16px;
        background: #F7F7F7;
        border-radius: 6px;
        border: none;
      }

      margin-bottom: 10px;
    }

    // 登录按钮
    .button-login {
      width: 100%;
      font-size: 16px;
      height: 50px;
    }


  }



}
</style>
